<template>
  <div class="listname">
    <img class="listname_img" :src="itemname[0].pic" alt="">
    <span class="listname_title">- {{itemname[0].name}} -</span>
    <ul class="listname_ul">
      <li v-for="item in itemobj">
        <router-link :to="{name:'listdetail',query:{'id':idxs,'childrenid':item.id}}">
          <img :src="item.pic" alt="">
          <span>{{item.name}}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import img01 from '../common/images/list01.png'
import img02 from '../common/images/list02.jpg'
export default {
  data () {
    return {
      img01,
      img02,
      itemobj: '',
      itemname: '',
      idxs: '',
      childrenid: ''
    }
  },
  methods: {
  },
  props: ['parentobj', 'parentname', 'idx'],
  created () {
    // console.log(this.parentobj, this.parentname, this.idx)
    this.itemobj = this.parentobj.filter(e => e.parent == this.idx)
    this.itemname = this.parentname.filter(e => e.id == this.idx)
    this.idxs = this.idx
    // console.log(this.itemname)
  }
}
</script>

<style>
.listname{
  width: 5.4rem;
  margin: auto ;
  padding-top: 0.2rem;
}
.listname_img{
  width: 5.4rem;
  display: block;
}
.listname_title{
  color: #222222;
  font-size: 14px;
  display: block;
  text-align: center;
  margin-top: 0.2rem;
}
.listname_ul{
  width: 100%;
  /* height: 2rem; */
  margin: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.listname_ul li{
  width: 1.5rem;
  margin-right: 0.45rem;
  margin-bottom: 0.2rem;
}
.listname_ul li:nth-child(3n){
  margin-right: 0;
}
.listname_ul li a{
  display: block;
}
.listname_ul li span{
  font-size: 0.26rem;
  color: #999999;
  display: block;
  text-align: center;
}
.listname_ul li img{
  width: 1.5rem;
  display: block;
}
</style>
